import React, { useState, useEffect } from 'react';
import axios from 'axios';

const useFoods = () => {
  const [foods, setFoods] = useState({});
  const [loading, setLoading] = useState(false);
  const getUser = async () => {
    setLoading(true);
    const resp = await axios.get('https://www.xiaozhu.run/api/foods');
    const foods = resp.data.data;
    setLoading(false);
    setFoods(foods);
  };
  useEffect(() => {
    getUser();
  }, []);
  return [foods, loading];
};

function Foods() {
  const [data, loading] = useFoods();
  const { categoryList, foodList } = data;

  console.log(data, loading);

  return (
    <div>
      {/* 分类 */}
      <ul>
        {(categoryList || []).map(cate => (
          <li key={cate.id}>{cate.name}</li>
        ))}
      </ul>
      {/* 菜品 */}
      <ul>
        {(foodList || []).map(food => (
          <li key={food.id}>{food.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Foods;
